<template>
	<div>
		<p>使用provide / inject传递数据</p>
		<Son />
	</div>
</template>
<script>
import Vue from "vue";
import Son from "./Son.vue";
export default {
	name: "",
	components: { Son },
	data() {
		return {};
	},
	provide: {
		msg: "我是provide要传递的数据(根组件)",
		obj: Vue.observable({ msg: "响应式provide数据" }),
	},
	mounted() {
		// 修改后渲染的数据没有变化，验证provide定义的是非响应式数据
		console.log(this._provided.msg);
		this._provided.msg = "我是修改之后provide要传递的数据(根组件)";
		console.log(this._provided.msg);

		// 修改响应式的provide数据
		console.log(this._provided.obj.msg);
		this._provided.obj.msg = "我是修改之后provide要传递的响应式数据";
		console.log(this._provided.obj.msg, this._provided);
	},
	methods: {},
};
</script>
<style lang="" scoped></style>
